<template>
  <div  class="login-container"  >
    <div class="login-box">

      <el-form  ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="100px" class="login-form">

        <el-form-item prop="username"  label="用户名：">
          <el-input v-model="loginForm.username" prefix-icon="el-icon-user-solid" ></el-input>
        </el-form-item>

        <el-form-item  prop="password"  label="密码：">
          <el-input v-model="loginForm.password" prefix-icon="el-icon-goods" ></el-input>
        </el-form-item>


        <el-form-item class="btns">
          <el-button type="primary" v-on:click="onSubmit('loginFormRef')" >登录</el-button>
          <el-button type="success" @click="reSetLoginForm" >重置</el-button>
        </el-form-item>
      </el-form>





    </div>
  </div>
</template>

<script>
  export default {
    data(){
      return{
        loginForm:{
          username:"zzy",
          password:"zzy12"
        }
        ,

        loginFormRules:{
          username: [
            { required: true, message: '用户名不能为空', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ]
          ,password: [
            { required: true, message: '密码不能为空', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ]

        }
,
        // 对话框显示和隐藏
        dialogVisible: false


      }
    }
  ,
    //提交表单事件
    methods: {

      //点击重置按钮 ,重置的原始的界面
      reSetLoginForm(){
       //console.log(this);
        this.$refs.loginFormRef.resetFields();
      },

      onSubmit(formName) {
        // 为表单绑定验证功能
        this.$refs[formName].validate( async  valid => { // 异步请求
          if (valid) {  // 使用 vue-router 路由到指定页面，该方式称之为编程式导航
          
          // const result = await this.$http.post("login",this.loginForm);
          //   if(result.data.code === 200 ){
          //      this.$message.success('登陆成功');
          //      this.$router.push("/home");
          //   }else{
          //     return this.$message.error('用户名或者密码错误');
          //   }

          // 假设 ajax  通过，然后 返回 token
          const token = "zzy_token_test";
          //保存到 sessionStorage 中去
          window.sessionStorage.setItem("token",token);
          this.$message.success('登陆成功');
           this.$router.push("/home");

          } else {
            this.dialogVisible = true;
            return this.$message.error('登陆失败');
          }
        });
      }



    }

  }
</script>

<style lang="less" scoped>

  .login-box{
    width: 500px;
    height: 400px;
    background-color: white;
    border-radius: 3px;
    position: absolute;
    left: 50%;
    top: 50px;
    transform: translate(-50%,50%);

  }

  .login-form{
    position: absolute;
    bottom: 120px;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .login-container{
     height: 100%;
    margin: 0;
    padding: 0;
    background-color: antiquewhite;
    background-image: url('../assets/image/zjzty.jpg')  ;
    background-repeat: no-repeat;
    
  }



</style>
